@charset "utf-8";
@import "common/reset";
@function p($px){
    @return $px/2+px;
}
.web{
    background:url(../img/banggou_bg.png);
    width:100%;
    height:100%;
    header{
        width:100%;
        height:p(552);
        border-bottom: p(1) solid #727272;
        display:flex;
        justify-content: center;
        align-items: center;
        background: linear-gradient(to top,rgba(30,30,30,.4),#fff p(38));
        img{
            width:p(467);
            height:p(488);
        }
    }
    section{
        background:#fff;
        .title{
            width:100%;
            height:p(88);
            line-height: p(88);
            padding:0 p(32);
            h3{
                font-size:p(30);
                color:#5c5c5c;
                overflow: hidden; 
                display: -webkit-box; 
                -webkit-line-clamp: 1; 
                -webkit-box-orient: vertical; 
            }
        }
        .detail{
            width:100%;
            height:p(172);
            padding-left: p(44);
            display: flex;
            justify-content: space-around;
            .detail_left{
                width:p(100);
                height:100%;
                flex-grow: 8;
                p{
                    font-size:p(26);
                    color:#5c5c5c;
                    width:95%;
                    overflow: hidden; 
                    display: -webkit-box; 
                    -webkit-line-clamp: 5; 
                    -webkit-box-orient: vertical; 
                }
                
            }
            .detail_right{
                width:p(100);
                height:100%;
                border-left:p(1) solid #e5e5e5;
                display:flex;
                flex-grow: 2;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                img{
                    width:p(42);
                    height:p(40);
                }
                p{
                    font-size:p(20);
                    color:#5c5c5c;
                    margin-top:p(13);
                }
            }
        }
        .price{
            display:flex;
            justify-content: space-around;
            margin-top:p(70);
            border-bottom:p(3) solid #e5e5e5;
            padding-bottom:p(11);
            .price_left{
                >p:nth-of-type(1){
                    font-size:p(28);
                    color:#e30202;
                }
                >p:nth-of-type(2){
                    font-size:p(24);
                    color:#6b6b6b;
                    margin-top:p(22);
                    margin-bottom:p(19);
                    select{
                        font-size:p(20);
                        color:#6b6b6b;
                        width:p(160);
                        height:p(50);
                        margin-left:p(68);
                    }
                }
                >p:nth-of-type(3){
                    font-size:p(20);
                    color:#6b6b6b;
                    margin-top:p(20);
                    
                }
                >div{
                    overflow: hidden;
                    >div:first-child{
                        float:left;
                        p:nth-child(1){
                            font-size:p(24);
                            color:#6b6b6b;
                            text-align: center;
                        }
                        p:nth-child(2){
                            font-size:p(18);
                            color:#6b6b6b;
                        }
                    }
                    >div:last-child{
                        float:left;
                        margin-left:p(30);
                        >div{
                            width:p(160);
                            height:p(50);
                            font-size:0;
                            
                            input{
                                width:p(50);
                                height:p(50);
                            }
                            input:nth-child(1){
                                background:#b5b5b5;
                                border:p(1) solid #6b6b6b;
                            }
                            input:nth-child(2){
                                background:#fff;
                                border-top:p(1) solid #6b6b6b;
                                border-bottom:p(1) solid #6b6b6b;
                            }
                            input:nth-child(3){
                                background:#b5b5b5;
                                border:p(1) solid #6b6b6b;
                            }
                        }
                    }
                }
            }
            .price_right{
                p{
                    display:block;
                    width:p(145);
                    height:p(60);
                    line-height: p(60);
                    font-size:p(19);
                    border-radius: p(10);
                    text-align: center;
                }
                p:nth-child(1){
                    color:#6b6b6b;
                    span{
                        color:#228ac5;
                    }
                }
                p:nth-child(2){
                    background:#38e859;
                    color:#fff;
                }
                p:nth-child(3){
                    background:#f6ac2b;
                    margin-top:p(8);
                    a{
                        color:#fff;
                    }
                }
                p:nth-child(4){
                    background:#f85c5c;
                    color:#fff;
                    margin-top:p(8);
                }
            }
        }
    }
    footer{
        margin-top:p(30);
        width:100%;
        border-top:p(1) solid #d3d1d3;
        input{
            display:none;
        }
        #check1:checked~.pinglun1{
            display:block;
        }
        #check1:checked~.nav .property{
            border:none;
            color:#ff4b4b;
        }
        #check1:checked~.nav .property label{
            color:#ff4b4b;
        }
        
        #check2:checked~.pinglun2{
            display:block;
        }#check2:checked~.nav .image_text{
            border:none;
            color:#ff4b4b;
        }
        #check2:checked~.nav .image_text label{
            color:#ff4b4b;
        }
        
        #check3:checked~.pinglun3{
            display:block;
        }
        #check3:checked~.nav .evaluate{
            border:none;
            color:#ff4b4b;
        }
        #check3:checked~.nav .evaluate label{
            color:#ff4b4b;
        }
        .nav{
            width:100%;
            height:p(75);
            line-height:p(75);
            display:flex;
            justify-content: space-around;
            >div{
                width:33.33%;
                height:100%;
                text-align: center;
                background:#e7e7e7;
                border:p(1) solid #d3d1d3;
                border-top:none;
                label{
                    font-size:p(26);
                    color:#515151;
                }
            }
        }
        .pinglun{
            padding:p(25) p(56);
            font-size:p(26);
            color:#5c5c5c;
            background:#fff;
            p{
                display:inline-block;
                height:p(35);
                line-height: p(35);
            }
        }
        .pinglun1{
            display:none;
        }
        .pinglun2{
            display:none;
            font-size:p(50);
            text-align: center;
            color:#00931c;
        }
        .pinglun3{
            display:none;
            font-size:p(50);
            text-align: center;
            color:#00931c;
        }
    }
}
